<template>
  <div class="address">
    <van-nav-bar
        title="我的收货地址"
        left-text=""
        right-text="新增地址"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
        />
        <!-- <span v-for="(item,index) in addArr " :key="index">{{item}}</span> -->
        
        <div class="address_1" v-for="(item,index) in addresslist" :key="index">
            <p class="floor">{{item.address}}</p>
            <div class="xinx">
                <span class="name">{{item.name}}</span>
                <span class="phone">{{item.phone}}</span>
            </div>
            <div class="mdf">
                <van-icon name="edit" @click="modify(item)"></van-icon>
            </div>
        </div> 
  </div>
</template>

<script>
import {address_list} from '../utils/api'
import { mapState } from 'vuex'
export default {
    data(){
        return{
            list:[],
        }
    },
    mounted(){
        var id = JSON.parse(localStorage.getItem('userinfo')).id;
        this.$store.dispatch('request_address_list');
        address_list({userid:id}).then((res)=>{
            this.list = res.data.list;
            // console.log(this.list);
        })
    },
    computed:{
        ...mapState(['addresslist']),
    },
    methods: {
        onClickRight() {
            this.$router.push('/addaddress');
        },
        modify(item){
            // this.$router.push('/modification/'+item.id);
            this.$router.push({
                name:'modification',
                query:{list:JSON.stringify({userid:item.userid,addressid:item.id,address:item.address,phone:item.phone,name:item.name})
            }});
        }
    },
}
</script>

<style lang="scss" scoped>

.address_1{
    background-color: #fff;
    height: 60px;
    display: flex;
    flex-direction:column;;
    padding-top: 5px;
    border-top: 1px solid #aab2ba;
    border-bottom: 1px solid #aab2ba;
    position: relative;
    .floor{
        width: auto;
        display: inline-block;
        margin: 5px 10px;
        font-size: 20px;
        font-weight: bolder;
    }
    .xinx{
        margin: 0 10px;
        .name{
            font-size: 14px;
            margin-left: 5px;
            margin-right: 20px;
        }
        .phone{
            font-size: 14px;

        }
    }
    .mdf{
        position: absolute;
        right: 10px;
        top: 20px;
    }
}

</style>